<template lang="html">
  <div>
  <div class="step2 box">
    <el-collapse v-model="activeNames">
      <el-collapse-item title="个人信息（必填）" name="1">
        <el-form :model="ruleForm" label-position="left" :rules="rules" ref="ruleForm" label-width="2.3rem" class="demo-ruleForm">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="ruleForm.name" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="电话号码" prop="tel">
            <el-input v-model.number="ruleForm.tel" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="紧急联系人关系" prop="contacterRelation">
            <!-- <el-radio-group v-model="ruleForm.contacterRelation">
              <el-radio-button label="父母" value="1"></el-radio-button>
              <el-radio-button label="配偶" value="2"></el-radio-button>
              <el-radio-button label="朋友" value="3"></el-radio-button>
              <el-radio-button label="同事" value="4"></el-radio-button>
            </el-radio-group> -->
            <el-select v-model="ruleForm.contacterRelation">
              <el-option v-for="(item,index) in connectArr" :key="index" :label="item" :value="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="紧急联系人姓名" prop="contacterName">
            <el-input v-model="ruleForm.contacterName"></el-input>
          </el-form-item>
          <el-form-item label="紧急联系人电话" prop="contacterTel">
            <el-input v-model.number="ruleForm.contacterTel"></el-input>
          </el-form-item>
        </el-form>
      </el-collapse-item>
      <div class="text-danger">*以下至少填写一组完整信息*</div>
      <el-collapse-item title="公司信息" name="2">
        <el-form :model="ruleForm2" label-position="left" :rules="rules" ref="ruleForm2" label-width="2.3rem" class="demo-ruleForm">
          <el-form-item label="公司名称"  prop="companyName">
            <el-input v-model="ruleForm2.companyName"></el-input>
          </el-form-item>
          <el-form-item label="公司地址"  prop="companyAddress">
            <el-input v-model="ruleForm2.companyAddress"></el-input>
          </el-form-item>
          <el-form-item label="工作状态" prop="workStatu">
            <el-select v-model="ruleForm2.workStatu">
              <!-- <el-option label="在职" value="0" key="0"></el-option> -->
              <!-- <el-option label="离职" value="1" key="1"></el-option> -->
              <el-option v-for="(item,index) in workStatuArr" :key="index" :label="item" :value="index"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-collapse-item>
      <el-collapse-item title="工作信息" name="3">
        <el-form :model="ruleForm3" label-position="left" :rules="rules" ref="ruleForm3" label-width="2.3rem" class="demo-ruleForm">
          <el-form-item label="职位"  prop="workPosition">
            <el-input v-model="ruleForm3.workPosition"></el-input>
          </el-form-item>
          <el-form-item label="收入" prop="inCome">
            <el-select v-model="ruleForm3.inCome">
              <el-option v-for="(item,index) in inComeArr" :key="index" :label="item" :value="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="公司邮箱"  prop="companyEmail">
            <el-input v-model="ruleForm3.companyEmail"></el-input>
          </el-form-item>
          <!-- <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm3')">立即创建</el-button>
          </el-form-item> -->
        </el-form>
      </el-collapse-item>
    </el-collapse>

    <el-button type="warning" name="button" @click="$emit('sonEmite')">点我免验证通过</el-button>
  </div>
    <div class="fixBtnShim"></div>
    <a href="javascript:void(0)" class="fixBtn" @click="myEmite"><span>下一步</span></a>
  </div>
</template>

<script>
// Vue.use(Radio);Vue.use(RadioGroup);Vue.use(RadioButton);
import { RadioGroup, RadioButton,Collapse,CollapseItem} from 'element-ui';
export default {
  components: {
    elRadioGroup:RadioGroup,elRadioButton:RadioButton,elCollapse:Collapse,
    elCollapseItem:CollapseItem
  },
  data() {
     return {
       activeNames:['1','2','3'],
       inComeArr:['4K以下','4K-6K','6K-8K','8K-10K','10K-15K','15K以上'],
       workStatuArr:['在职', '离职'],
       connectArr:['父母','配偶','朋友','同事'],
       ruleForm: {
          name:'',
          tel:1,
          contacterRelation:'',
          contacterName:'',
          contacterTel:1,
        },
        ruleForm2: {
          companyName:'',
          companyAddress:'',
          workStatu:''
        },
        ruleForm3: {
          workPosition:'',
          inCome:'',
          companyEmail:''
        },
        userId:'',
        oUserInfo:{},
        rules: {
          // name: [
          //   { required: true, message: '请输入姓名', trigger: 'blur' },
          //   { min: 2, max: 4, message: '长度在 2 到 4 个字符', trigger: 'blur' }
          // ],
          // tel: [
          //   { required: true, message: '请输入电话号码', trigger: 'blur' },
          //   {validator: this.checkTel, trigger: 'blur'}
          // ],
          contacterRelation: [
            { required: true, message: '请选择联系人关系', trigger: 'change' }
          ],
          contacterName: [
            { required: true, message: '请输入联系人姓名', trigger: 'blur' },
            { min: 2, max: 4, message: '长度在 2 到 4 个字符', trigger: 'blur' }
          ],
          contacterTel: [
            { required: true, message: '请输紧急联系人电话', trigger: 'blur' },
            {validator: this.checkTel, trigger: 'blur'}
          ],
          companyName: [
            { required: true, message: '请输入公司名称', trigger: 'blur' },
          ],
          companyAddress: [
            { required: true, message: '请输入公司地址', trigger: 'blur' },
          ],
          workStatu: [
            { required: true, message: '请选择工作状态', trigger: 'change' },
          ],
          workPosition: [
            {required: true, message: '请输入职位', trigger:'blur'}
          ],
          inCome: [
            {required: true, message: '请选择收入', trigger:'change'}
          ],
          companyEmail: [
            {required: true, message: '请输入邮箱地址', trigger:'blur'},
            {type: 'email', message: '请输正确的邮箱地址', trigger:'blur'}
          ]
        }
     };
   },
   async beforeMount(){
     this.userId = this.$route.params.userId;
     this.oUserInfo = await this.$store.dispatch('getUserMsg',{userId:this.userId})

     this.ruleForm.name = this.oUserInfo.name;
     this.ruleForm.tel = parseInt(this.oUserInfo.mobile);
     this.ruleForm.contacterRelation = this.oUserInfo.linkmanType;
     this.ruleForm.contacterName = this.oUserInfo.linkman;
     this.ruleForm.contacterTel = parseInt(this.oUserInfo.linkmanMobile);
     this.ruleForm2.companyName = this.oUserInfo.company;
     this.ruleForm2.companyAddress = this.oUserInfo.companyAddress;
     this.ruleForm2.workStatu = !!this.oUserInfo.dptStatus?this.oUserInfo.dptStatus:0;
     this.ruleForm3.workPosition = this.oUserInfo.job;
     this.ruleForm3.inCome = !!this.oUserInfo.income?this.oUserInfo.income:0;
     this.ruleForm3.companyEmail = this.oUserInfo.email;
   },
   mounted(){
     this.setTit('完善信息')
   },
   methods: {

    //  handleChange(val) {
    //          console.log(val);
    // },
    async myEmite(){

      let fm1 = await this.submitForm('ruleForm');
      if(!fm1){
        // console.log(this.$refs['ruleForm'].$el.offsetTop);
        window.scrollTo(0,this.$refs['ruleForm'].$el.offsetTop - 60)
        return;
      }
      let fm2 = await this.submitForm('ruleForm2');
      let fm3 = await this.submitForm('ruleForm3');
      if(!fm2 && !fm3){
        window.scrollTo(0,this.$refs['ruleForm2'].$el.offsetTop - 110)
      }else{
        this.$store.dispatch('supplementUserMsg',{
            userId:parseInt(this.userId),
            linkmanType:parseInt(this.ruleForm.contacterRelation),
            linkman:this.ruleForm.contacterName,
            linkmanMobile:this.ruleForm.contacterTel,
            //
            company:this.ruleForm2.companyName,
            companyAddress:this.ruleForm2.companyName,
            dptStatus:parseInt(this.ruleForm2.workStatu),
            //
            job:this.ruleForm3.workPosition,
            income:parseInt(this.ruleForm3.inCome),
            email:this.ruleForm3.companyEmail
        }).then(res => {
          console.log('res',res);
          if(res === 1){
            this.$emit('sonEmite');
          }
        })

      }
      console.log(fm2,fm3);

    },
    async submitForm(formName) {
     let a = false;
       await this.$refs[formName].validate((valid) => {
         if (valid) {
           console.log(formName + '----' + 'check ok')
           a = true
         } else {
           console.log('error submit!!');
           a = false;
         }
       })
       console.log(3333);
       return a;
     },
     resetForm(formName) {
       this.$refs[formName].resetFields();
     }
   }
}
</script>

<style lang="scss">
.step2{
  padding:0 .2rem;
  .el-collapse-item__header{background-color: #f2f2f2;text-indent: .2rem;}
  .el-collapse-item__content{padding-top:.3rem}
  .el-form-item{margin-bottom:.4rem;}
  .el-form-item__label{font-size:.26rem;}
  .el-radio__label{font-size: .24rem;padding-left:.2rem;}
  .text-danger{color:#cd3500;font-size: .28rem;line-height: 1.04rem;font-weight: 600}
}
</style>
